import axios from 'axios'
import ImagesList from './ImagesList'
import { useState, useEffect, useRef, useCallback } from 'react'
import api from '../servers/api'
import { CircularProgress } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import './search.scss'
import InfiniteScroll from 'react-infinite-scroll-component'
import TextField from '@material-ui/core/TextField';
import IconButton from '@material-ui/core/IconButton';
function Search() {
    const useStyles = makeStyles((theme) => ({
        root: {
            position: 'fixed',
            left: '0',
            right: '0',
            top: '0',
            bottom: '0',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
        },
    }))
    const style = useStyles()
    const images = useRef([])
    const [start, setStart] = useState('')
    const [keyword, setKeyword] = useState('')
    const [search, setSearch] = useState('')
    const next = useRef('')
    const hasNext = useRef(false)
    const [isLoading, setLoadingStatus] = useState(true)
    const [renderJsx, setRenderJsx] = useState(<div className={style.root}>
        <CircularProgress />
    </div>)
    useEffect(() => {
        async function getImages() {
            setLoadingStatus(true)
            const { data } = await axios.get(api.bqz.search, {
                params: {
                    start,
                    keyword
                }
            })
            let imagesResult = data.data.objectList
            imagesResult = imagesResult.filter(Boolean).map(image => {
                image.url = image.smallURL.replace(/\d{3}x/, (result) => {
                    return parseInt(result) > 240 ? '240x' : result
                })
                return image
            })
            next.current = data.data.nextStart
            hasNext.current = data.data.more
            images.current = start ? images.current.concat(imagesResult) : imagesResult
            setTimeout(() => {
                setLoadingStatus(false)
            }, 500)
        }
        getImages()
    }, [start,keyword]);
    const loadFirst = useCallback(() => {
        setStart('')
        setKeyword(search)
    }, [search])
    const loadNext = useCallback(() => {
        setStart(next.current)
    }, [])
    useEffect(() => {
        if (!isLoading) {
            setRenderJsx((
                <div>
                    <div className='search'>
                        <TextField
                            label="请输入关键字"
                            color="secondary"
                            value={search}
                            onChange={event => setSearch(event.target.value)}
                            onKeyUp={e => {
                                if (e.keyCode === 13) {
                                   loadFirst() 
                                }
                            }}
                        />
                        <IconButton variant="outlined" size="small" onClick={loadFirst}>
                            搜索
                        </IconButton>
                    </div>
                    <InfiniteScroll next={loadNext} dataLength={images.current.length} hasMore={hasNext} className='imgList'>
                        <ImagesList images={images.current} />
                    </InfiniteScroll>
                </div>
            ))
        }
    }, [isLoading, images, hasNext, loadNext,loadFirst,search])
    return renderJsx
}


export default Search